<template>
    <div>
        <p>绑定的值(props):{{ props.mVal }}</p>
        <p>绑定的值(props):{{ props.mVal2 }}</p>
        <input type="text" :value="mVal" @input="(event)=>{emit('updata:mVal',(event.target as HTMLInputElement).value)}">
        <input type="text" :value="mVal2" @input="(event)=>{emit('updata:mVal2',(event.target as HTMLInputElement).value)}">
        <input type="text" v-model="userFrom.name">
        <input type="text" v-model="userFrom.sex">
        <input type="text" v-model="userFrom.age">
    </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
const props=defineProps(['mVal','mVal2','userInfo'])
const emit=defineEmits(['updata:mVal','updata:mVal2','updata:userInfo'])
const userFrom=reactive(props.userInfo)
watch(userFrom,()=>{
    console.log(userFrom);
    emit('updata:userInfo',userFrom)
})
</script>